CSS2 introduces a number of new concepts, as well as new selectors and properties. Among these is the idea of media. Style Master Pro helps you work with media and style sheets.
There are two important aspects to media in CSS2. Firstly, you can conditionally import a style sheet based on the current medium being used to display a page. For example, if a web page is being displayed on a handheld device, you can specify that the browser displaying the page should import a particular style sheet. If the page is being displayed on a PC, then you can specify that a different style sheet be used for presenting the page.
The second aspect of Media that you can work with in Style Master Pro is the @media rule. @media rules are like mini style sheets that can form part of the whole style sheet. An @media rule is only used by a browser when a page is being displayed in a particular medium. For example, you could have an @media rule that defines a set of statements to be used when a page is being displayed using a handheld device, and another for when a page is being displayed on a PC. We'll see how to do this shortly.
If you'd like to learn more about Media in CSS2, see our Guide.
In Style Master Pro, the @import rule can specify when a style sheet will be imported. For example, when a browser is displaying a page on a TV screen, then only @import rules which specify the medium as TV (or all), or specify no medium will be imported and used. It's also possible to specify that the same style sheet should be imported for several different media.
To specify the media for an @import rule
1. choose from the menu
2. choose from the pop-up menu in the New Statement dialog
3. click
an @import rule Editor opens
To specify the url of the style sheet to be imported
1. type or paste the relative path (from the current style sheet to the imported style sheet) or the absolute URL of the imported style sheet.
or
2. click and use the open dialog to locate the style sheet you want to import.
Style Master creates the relative path in this case.
Note: will be unavailable if the current style sheet hasn't been saved, because it isn't possible to create a relative path from this style sheet as it doesn't really have a location yet.
To specify the media for which this style sheet will be used
1. select the names of the media you want to import this style sheet for from the list at the left of the window
2. click , and the names of the media you selected will be added to the list of media names on the right of the window
To remove media from the list
1. select the names of the media you want to remove from the list
2. click , and the names will be removed from the list
An @media rule is like a mini style sheet inside another style sheet. It contains rules, comments etc. just like a style sheet, but is only used when a page is being displayed in a particular medium or set of media.
There are two important steps when working with an @media rule
To create the @media rule
1. choose from the menu
2. choose from the pop-up menu in the New Statement dialog
3. click
an @media Rule Editor opens
To specify the media for this @media rule
1. select the names of the media you want from the list at the left of the window
2. click , and the names of the media you selected will be added to the list of media names on the right of the window
To remove media from the list
1. select the names of the media you want to remove from the list
2. click , and the names will be removed from the list
To finalise the rule
1. click
The window closes, and a new @media rule is added to the list of statements in the style sheet.
The next aspect of creating an @media rule is to add statements to it.
To add a statement to an @media rule
1. drag the statement in the list of statements for the style sheet onto the @media rule
2. the statement will be indented to signify that it belongs to the @media rule
To remove a statement from an @media rule
1. drag the statement above or below the @media rule, and any of its statements in the list of statements for the style sheet.
2. the statement will no longer be indented
In this chapter we learnt about media and style sheets and how Style Master Pro helps you work with them.
In the next chapter we will learn about CSS2 support for printing, and how you can work with this in Style Master Pro.